import React, { useCallback, useEffect, useState, useRef } from "react";
import { Form, Input, Button, Select, Col, Row, message } from "antd";
import request from "@/utils/request";
import MarkdownIt from "markdown-it";
import "../css/add.css";
const { Option } = Select;
const { TextArea } = Input;
const md = new MarkdownIt();

let refdiv;

function Add(props) {
  
  const [originData, setlist] = useState([]);
  const [query, setQuery] = useState({}); // 搜索条件
  const [txt, changeTxt] = useState("");
  const [show, changeshow] = useState(false);
  const [form] = Form.useForm();

  // 获取标签表单数据
  const getList = useCallback(async () => {
    const { data: res } = await request.get("/tag", { params: query });
    if (res.code !== 200) return message.error("获取数据失败！");
    setlist(res.data);
  }, []);
  useEffect(() => {
    getList();
  }, []);

  useEffect(function () {
    refdiv = React.createRef();
  }, []);

  const showTextArea = useCallback(function () {
    changeshow(function () {
      return !show;
    });
  });

  // 点击预览按钮
  const onChange = useCallback(function Change(e) {
    changeTxt(function (txt) {
      let text = md.render(e.target.value);
      txt = text;
      if (refdiv.current !== null) refdiv.current.innerHTML = txt;
      return txt;
    });
  }, []);

  // 点击存草稿按钮
  const Draft=useCallback(function(){
    message.success("还没这个功能哦，去试试别的叭")
  })
 // 点击提交按钮
  const onFinish = (values) => {
    // console.log(values);
    // //处理传过去的文章内容
    // values.content = values.content
    //   .replace(/\r\n/g, "<br/>")
    //   .replace(/\n/g, "<br/>")
    //   .replace(/\s/g, "&nbsp;");
    request.post("/article", values).then(({ data }) => {
      console.log("data", data);
      if (data.code === 200) {
        message.success("数据添加成功");
      }
    });

    form.setFieldsValue({
      title: "",
      descript: "",
      keyworks: "",
      tag: "",
      content: "",
    });
    refdiv.current.innerHTML = ''
  };

  return (
    <div>
      {/* form表单 字段 */}
      <Form
        labelCol={{ span: 3 }}
        form={form}
        // wrapperCol={{ span: 20 }}
        onFinish={onFinish}
      >
        <Row>
          <Col span={10} style={{ paddingBottom: 10 }}>
            <Form.Item
              label="标题"
              name="title"
              rules={[{ required: true, message: "请输入标题" }]}
            >
              <Input placeholder="请输入标题" />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              label="描述"
              name="descript"
              rules={[{ required: true, message: "请输入描述" }]}
            >
              <Input placeholder="请输入简短的描述" />
            </Form.Item>
          </Col>
        </Row>
        <Row>
          <Col span={10}>
            <Form.Item
              label="关键字"
              name="keyworks"
              rules={[{ required: true, message: "请输入关键字 " }]}
            >
              <Input
                placeholder="请输入关键字"
              // value={keyword}
              />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              label="标签"
              name="tag"
              rules={[{ required: true, message: "请选择标签!" }]}
            >
              <Select
                mode="multiple"
                allowClear
                style={{ width: "100%" }}
                placeholder="请选择标签"
              >
                {originData.map((item) => {
                  return <Option key={item.lable}>{item.lable}</Option>;
                })}
              </Select>
            </Form.Item>
          </Col>
        </Row>

        {/* 文本框区域 */}
        <Row>
          <Col span={11}>
            <Form.Item
              name="content"
              rules={[{ required: true, message: "请输入MD格式文本!" }]}
            >
              <TextArea
                className="focus"
                showCount
                maxLength={9999}
                onChange={onChange}
                autoSize={{ minRows: 18, maxRows: 9999 }}
                placeholder="请输入文章内容，md格式"
                value={txt}
              ></TextArea>
            </Form.Item>
          </Col>

          {/* 预览区域 */}
          <Col span={11} style={show ? "" : { display: "none" }}>
            <div
              className="myshow"
              style={{
                border: "1px solid #ddd",
                backgroundColor: "#fff",
                paddingBottom: 20,
              }}
              ref={refdiv}
            ></div>
          </Col>
        </Row>
        {/* 底部 */}

        <Button type="primary" style={{ width: "100px" }} htmlType="submit">
          提 交
        </Button>
        <Button
          type="primary"
          style={{ width: "100px", marginLeft: "20px" }}
          onClick={showTextArea}
        >
          {show ? "收起" : "预览"}
        </Button>
        <Button
          type="primary"
          danger
          style={{ width: "100px", marginLeft: "20px" }}
          onClick={Draft}
        >
          存草稿
        </Button>
      </Form>
    </div>
  );
}
export default Add;
